<template>
  <div class="app-container">
    <el-card>
      <PageSearch
        v-permission="`get:/user/list`"
        :search-fields="searchFields"
        :load-data="getList"
        :page-param="pageParam"
      />

      <el-row style="padding: 20px 0">
        <el-table
          v-permission="`get:/user/list`"
          :data="userList"
        >
          <el-table-column label="昵称" prop="nickName" />
          <el-table-column
            v-slot="scope"
            label="头像"
          >
            <template>
              <el-image
                style="width: 100px;height: 100px"
                :src="scope.row.avatar"
                fit="fill"
              />
            </template>

          </el-table-column>
          <el-table-column label="注册时间" prop="createdTime" />
          <el-table-column label="openId" prop="openId" />
          <el-table-column
            v-slot="scope"
            label="状态"
          >
            <template>
              {{ scope.row.status===0?"正常":"禁用" }}
              <el-switch
                v-model="scope.row.status"
                v-permission="`post:/user/status/switch`"
                :active-value="0"
                :inactive-value="-1"
                @change="statusSwitch(scope.row)"
              />
            </template>

          </el-table-column>
        </el-table>
      </el-row>

      <el-row
        v-permission="`get:/goods/list`"
        style="padding: 20px 0"
      >
        <el-pagination
          :current-page.sync="pageParam.pageNum"
          :page-sizes="[10, 50, 100, 200,1]"
          :page-size="pageParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>
  </div>
</template>

<script>
import PageSearch from '@/pp-components/PageSearch.vue'
import { getList, statusSwitch } from '@/api/pp/user/user'
import permission from '@/directive/permission/index.js'
export default {
  components: { PageSearch },
  directives: { permission },
  data() {
    return {
      searchFields: [
        { name: 'nickName', placeholder: '用户昵称模糊匹配' }
      ],
      pageParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      userList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getList(this.pageParam).then(res => {
        this.userList = res.data.list
        this.pageParam.total = res.data.total
      })
    },
    statusSwitch(row) {
      statusSwitch(row.userId).then(res => {
        this.$msgOk(res)
        this.getList()
      }).catch(() => {
        this.getList()
      })
    },
    handleSizeChange() {
      this.pageParam.pageSize = val
      this.pageParam.pageNum = 1
      this.getList()
    },
    handleCurrentChange() {
      this.pageParam.pageSize = val
      this.pageParam.pageNum = 1
      this.getList()
    }
  }

}
</script>

<style lang="sass" scoped>

</style>
